export function initializeComponents(shadowRoot) {
    // 创建 VideoPlayer 组件
    const videoPlayer = document.createElement("video-player");
    
    // 创建 InteractionBar 组件
    const interactionBar = document.createElement("interaction-bar");
    
    // 设置InteractionBar的初始数据
    interactionBar.setAttribute('like-count', '1234');
    interactionBar.setAttribute('comment-count', '567');
    interactionBar.setAttribute('collect-count', '89');
    interactionBar.setAttribute('share-count', '45');
    
    // 创建 VideoInfo 组件
    const videoInfo = document.createElement("video-info");
    
    // 设置VideoInfo的测试数据
    videoInfo.setAttribute('author', 'Share-Top创作者');
    videoInfo.setAttribute('author-avatar', 'https://images.unsplash.com/photo-1494790108755-2616b612b786?w=100&h=100&fit=crop&crop=face');
    videoInfo.setAttribute('title', '精彩短视频分享');
    videoInfo.setAttribute('description', '这是一个详细的视频描述，展示了有趣的内容和故事，帮助观众更好地理解视频主题和内容。');
    videoInfo.setAttribute('hashtags', '#Share-Top #短视频 #创意 #生活 #分享');
    videoInfo.setAttribute('verified', 'true');
    videoInfo.setAttribute('following', 'false');
    videoInfo.setAttribute('background-music', 'https://www.soundjay.com/misc/sounds/bell-ringing-05.wav');
    videoInfo.setAttribute('background-music-name', '默认背景音乐');
    
    // 将组件添加到 custom-content 容器中
    const contentContainer = shadowRoot.querySelector('.custom-content');
    contentContainer.appendChild(videoPlayer);
    contentContainer.appendChild(interactionBar);
    contentContainer.appendChild(videoInfo);
    
    return { interactionBar, videoInfo, videoPlayer };
}

export function bindEvents(interactionBar, videoInfo, videoPlayer) {
    // 监听InteractionBar事件
    interactionBar.addEventListener('like-changed', (e) => {
        // console.log('点赞状态改变:', e.detail);
    });
    
    interactionBar.addEventListener('collect-changed', (e) => {
        // console.log('收藏状态改变:', e.detail);
    });
    
    interactionBar.addEventListener('comment-clicked', (e) => {
        // console.log('点击评论:', e.detail);
        // 这里可以打开评论弹窗
    });
    
    interactionBar.addEventListener('share-clicked', (e) => {
        // console.log('点击分享:', e.detail);
        // 这里可以打开分享弹窗
    });
    
    // 监听VideoInfo事件
    videoInfo.addEventListener('follow-changed', (e) => {
        // console.log('关注状态改变:', e.detail);
    });
    
    videoInfo.addEventListener('hashtag-clicked', (e) => {
        // console.log('点击话题:', e.detail);
        // 这里可以跳转到话题页面
    });
    
    videoInfo.addEventListener('author-clicked', (e) => {
        // console.log('点击作者:', e.detail);
        // 这里可以跳转到作者主页
    });
    
    // 监听VideoPlayer事件
    videoPlayer.addEventListener('video-changed', (e) => {
        // console.log('视频切换:', e.detail);
        // 这里可以更新InteractionBar和VideoInfo的数据
        const currentVideo = e.detail.video;
        
        // 更新VideoInfo显示的所有内容
        videoInfo.setAttribute('title', currentVideo.title);
        videoInfo.setAttribute('description', currentVideo.description);
        videoInfo.setAttribute('author', currentVideo.author);
        videoInfo.setAttribute('author-avatar', currentVideo.authorAvatar);
        videoInfo.setAttribute('hashtags', currentVideo.hashtags);
        videoInfo.setAttribute('background-music', currentVideo.backgroundMusic || '');
        videoInfo.setAttribute('background-music-name', currentVideo.backgroundMusicName || '未知音乐');
        
        // 可以根据视频更新点赞数等数据
        const randomLikes = Math.floor(Math.random() * 10000) + 1000;
        const randomComments = Math.floor(Math.random() * 1000) + 100;
        interactionBar.setAttribute('like-count', randomLikes.toString());
        interactionBar.setAttribute('comment-count', randomComments.toString());
    });
}